<template>
    <el-form inline  class="demo-form-inline">
        <el-form-item label="品牌名">
            <el-input v-model="query.payload.name" placeholder="品牌名" />
        </el-form-item>
        <el-form-item label="显示状态">
            <el-select v-model="query.payload.showStatus" placeholder="显示状态">
                <el-option label = "显示" value="1"/>
                <el-option label = "不显示" value="0"/>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" activity @click="queryData">查询</el-button>
            <el-button type="warning" activity @click="reset">重置</el-button>
            <el-button type="success" @click="toAdd">新增</el-button>
        </el-form-item>
    </el-form>
    <el-divider style="margin: 12px 0"/>
    <el-table ref="table" border  v-loading="loading"  :data="data.tableData" header-cell-class-name="headerClass">
        <el-table-column align="center" type="index"  label="序号" width="100px" />
        <el-table-column align="center"  prop="name" label="品牌名" />
        <el-table-column align="center"  prop="logo" label="品牌logo" width="150px">
            <template v-cloak #default="scope">
                <el-image :preview-src-list="[scope.row.logo]"
                          :src="scope.row.logo" fit="fill" :preview-teleported="true" />
            </template>
        </el-table-column>
        <el-table-column align="center"  prop="descript" show-overflow-tooltip label="介绍" />
        <el-table-column align="center"  prop="showStatus" label="显示状态" >
            <template #default="scope">
                <el-switch
                        v-model="scope.row.showStatus"
                        inline-prompt
                        :active-value="1"
                        :inactive-value="0"
                        active-text="是"
                        inactive-text="否"
                        @change = changeStatus(scope.row)
                />
            </template>
        </el-table-column>
        <el-table-column align="center"  prop="firstLetter" label="检索首字母" />
        <el-table-column align="center"  prop="sort" label="排序" />
        <el-table-column align="center"  prop="updateTime" label="更新时间" >
            <template #default="scope">
                {{moment(scope.row.updateTime).format("yyyy-MM-DD HH:mm:ss")}}
            </template>
        </el-table-column>
        <el-table-column align="center"  label="操作"  width="220px" >
            <template #default="scope">
                <el-link style="font-size: 14px" title="关联分类" type="primary" @click="toCategoryRelation(scope.row.brandId)">
                    <el-icon :size="15">
                        <Edit/>
                    </el-icon>
                    关联分类
                </el-link>
                &nbsp;
                <el-link style="font-size: 14px" title="修改" type="primary" @click="toEdit(scope.row.brandId)">
                    <el-icon :size="15">
                     <Edit />
                    </el-icon>
                    修改
                </el-link>
                &nbsp;
                <el-popconfirm title="删除？" @confirm="deleteThis(scope.row.brandId)"  @cancel="">
                    <template #reference>
                        <el-link style="font-size: 14px" type="danger" title="删除">
                            <el-icon :size="15">
                                <Delete />
                            </el-icon>
                            删除
                        </el-link>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
        <el-pagination
                style="display: flex;align-items:center;justify-content:center;"
                v-model:currentPage="query.currentPage"
                v-model:page-size="query.pageSize"
                :page-sizes="[10, 20, 30]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="query.total"
                @size-change="queryData"
                @current-change="queryData"
        />
<ModPmsBrand ref="modPmsBrand" @reload="queryData"
             :id="data.id" :type="data.type"/>
<ModPmsCategoryBrandRelation ref="modPmsCategoryBrandRelation"
                             @reload="queryData" :id="transData.id"
                             :isOpen="transData.isOpen"
                             :openType="transData.openType"/>
</template>

<script setup>
    import MySelectOption from '@/components/common/MySelectOption.vue'
    import ModPmsBrand from '@/views/mall/pms/components/ModPmsBrand.vue'
    import ModPmsCategoryBrandRelation from '@/views/mall/pms/components/ModPmsCategoryBrandRelation.vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    import {ref,  reactive, onMounted} from 'vue'
    import moment from 'moment'
    let transData = reactive({})
    import useAuthBtn from '@/hooks/useAuthBtn.js'
    let authBtn = useAuthBtn()

    let data = reactive({
        open:false,
        tableData:[],
        type:"",
        id:"",
    });
    let loading = ref(true)
    let roleOnUser = ref(null)
    let modPmsBrand = ref(null)
    let modPmsCategoryBrandRelation = ref(null)
    let importDataDialogue = ref(null)
    let genderDicItems = reactive([])

    let query = reactive({currentPage:1, pageSize:10, total:0, payload:{}})
    onMounted(() => {
        request.get(`/api/useDic/getDicItems/gender`).then(resp => {
            genderDicItems.push(...resp)
        })
        queryData()
    })
    function queryData(){
        request.post("/api/pmsBrand/getPmsBrands", query).then(resp => {
            data.tableData = resp.records
            query.total = resp.total
            loading.value = false
        })
    }
    function transDicValue (dicItmes, code){
        let value = '-'
        for (let i = 0; i < dicItmes.length; i++) {
            if(dicItmes[i].code == code){
                value = dicItmes[i].value
                break
            }
        }
        return value
    }

    function toAdd(){
        modPmsBrand.value.showDialog = true
        data.type = "add"
    }
    function deleteThis(id){
        request.get(`/api/pmsBrand/delete/${id}`).then(resp => {
            queryData()
            ElMessage({message: '删除成功！',type: 'success'})
        });
    }
    function toEdit(id){
        data.id = id
        data.type = "edit"
        modPmsBrand.value.showDialog = true
    }
    function toCategoryRelation(id){
        transData.openType = "edit"
        transData.id = id
        modPmsCategoryBrandRelation.value.isOpen = true
    }
    function changeStatus(row){
        request.get(`/api/pmsBrand/changeShowStatus/${row.brandId}/${row.showStatus}`).then(resp => {
            ElMessage({message: '更改状态成功！',type: 'success'})
        })
    }

</script>
<style lang="css" scoped>
    .address {overflow:hidden;white-space:nowrap;word-wrap:break-word;text-overflow:"ellipsis";}
    .head {background-color: #9561cc}
    [v-cloak]{
        display: none  !important;
    }
</style>